<template>
  <div class="container">
    <div class="top-box">
      <div class="top-group-item-avatar">
        <image :src="productInfo.avatar" />
      </div>
      <div class="top-group-box">
        <div class="top-group-item">
          {{ productInfo.name }}
        </div>
        <div class="top-group-box-tag">
          <uni-tag
            :inverted="true"
            text="标签"
            type="primary"
            class="box-tag"
          />
          <uni-tag
            :inverted="true"
            text="标签"
            type="primary"
            class="box-tag"
          />
          <uni-tag
            :inverted="true"
            text="标签"
            type="primary"
            class="box-tag"
          />
          <uni-tag
            :inverted="true"
            text="标签"
            type="primary"
            class="box-tag"
          />
        </div>
      </div>
    </div>
    <div class="date-box">
      <div class="date-text">预约日期</div>
      <div class="date-box-table">
        <div class="date-box-item" v-for="(item, index) in 30" :key="index">
          <div class="date-box-item-data">
            <div class="data-now">今日</div>
            <div class="data-date">07/06</div>
          </div>
          <div class="date-box-item-state">约满</div>
        </div>
      </div>
    </div>
    <!-- 套餐项目 -->
    <div class="content">
      <div class="date-text">
        <uni-segmented-control
          :current="current"
          :values="tabsList"
          :style-type="styleType"
          :active-color="activeColor"
          @clickItem="onClickItem"
        />
      </div>
      <view v-if="current === 0" class="projects">
        <div class="content-group">
          <div
            class="content-group-item"
            v-for="(item, index) in list"
            :key="index"
          >
            <uni-row>
              <uni-col :span="6"> 项目名称 </uni-col>
              <uni-col :span="18">
                {{ item.name }}
              </uni-col>
            </uni-row>
            <uni-row>
              <uni-col :span="6"> 项目描述 </uni-col>
              <uni-col :span="18">
                {{ item.address }}
              </uni-col>
            </uni-row>
          </div>
        </div>
      </view>
      <view v-if="current === 1" class="notes">
        <div
          class="content-box"
          v-for="(item, index) in contentList"
          :key="index"
        >
          <div class="content-box-title" v-if="item.title">
            {{ item.title }}
          </div>
          <div class="content-box-subTitle" v-if="item.subTitle">
            {{ item.subTitle }}
          </div>
          <div
            class="content-detail"
            v-for="(detail, index) in item.content"
            :key="index"
          >
            {{ detail }}
          </div>
        </div>
      </view>
    </div>
    <!-- 结算 -->
    <div class="bottom-box">
      <div class="bottom-box-item">
        <div class="bottom-box-item-left">
          <div class="bottom-box-item-left-text">合计</div>
          <div class="bottom-box-item-left-price">￥{{ productInfo.cost }}</div>
        </div>
        <div class="bottom-box-item-right">
          <uni-tag text="预约" type="primary" @click="handleViewQRCode" />
        </div>
      </div>
    </div>
    <view>
      <uni-popup ref="getQEDialog" type="dialog">
        <uni-popup-dialog
          title="查看体检码"
          type="info"
          content="请使用微信扫码查看体检码"
          :showCancelButton="false"
          @confirm="closeDialog"
        >
          <canvas class="view-qr-code" canvas-id="myQrcode"></canvas>
        </uni-popup-dialog>
      </uni-popup>
    </view>
  </div>
</template>

<script>
import drawQrcode from "@/utils/weapp.qrcode.esm.js";

export default {
  data() {
    return {
      productInfo: {
        name: "新生体检",
        cost: "200",
        avatar: "https://img.yzcdn.cn/vant/cat.jpeg",
        QECode: "111111",
      },
      tabsList: ["套餐项目", "检查须知"],
      styleType: "text",
      activeColor: "#1989fa",
      current: 0,
      contentList: [
        {
          title: "一、体检前注意事项",
          content: [
            "1、体检当天请您于8：00—10：30到达健康管理中心进行体检，效果更佳。",
            "2、检查前一天请清淡饮食，禁酒禁辛辣，注意休息，避免剧烈运动和情绪激动，晚上8点后不再进食。",
            "3、体检当日请空腹，禁食、勿饮水。不要吃对肝、肾功能有损害的药物。",
            "4、不化妆、不戴首饰，不穿复杂服装。核磁共振检查，应禁止佩带首饰、手表、手机等金属物品。",
            "5、体检不适症如体检者当日出现发热或腹泻等不适情况，应取消当天的体检。",
            "6、请带好相关身份证件，如曾经住院或动过手术，请带病历和相关资料，供体检医师参考。",
          ],
        },
        {
          subTitle: "【特殊情况体检注意事项】",
          content: [
            "1、女性经期不宜做妇科、尿液检查。未婚女性不做妇科检查。",
            "2、怀孕的女士或准备怀孕的女性，请在检前告知医护人员，不要参加X线的检查。",
          ],
        },
        {
          subTitle: "【女性体检前注意事项】",
          content: [
            "1、拟在半年内怀孕的夫妇，请勿做X线检查、骨密度检查。",
            "2、做经颅多普勒检查时，需停服对脑血管有影响的药物3天以上。做脑电图检查前一天应洗头。",
            "3、糖尿病、高血压、心脏病、哮喘等慢性疾病患者，请将平时服用的药物携带备用，受检日建议不要停药。",
          ],
        },
        {
          title: "二、检体中注意事项",
          content: [
            "1、请在体检过程中配合中心的引导，如遇到任何问题请咨询体检中心工作人员解决。",
            "2、请勿隐瞒病史，防止误诊。",
            "3、体检过程中如发现问题请及时与体检医生联系，应积极配合医生的各项检查，务必按预定项目逐科、逐项检查，不要漏检。",
            "4、抽血后立即压迫针孔三分钟，防止出血，勿揉局部。",
            "5、如需进行膀胱、前列腺、子宫、附件B超时请勿排尿，如无尿需饮水至膀胱充盈。",
            "6、如需要妇检，检查前请排清小便。",
          ],
        },
        {
          title: "三、体检后注意事项",
          content: [
            "1、全部检查后请将体检单交回健康管理中心服务台。",
            "2、如果您此次检查中身体状况良好，请保持您良好的生活习惯，并且定期给您的身体作健康检查。",
            "3、如果体检结果反映出您的健康状况存在问题，请根据体检医师以及健康指导建议及时就医，并且合理地安排好您的生活作息和习惯。",
            "4、留存准确的个人信息，以备检后网上查询或领取体检报告使用；妥善保管好体检报告，可作为您以后就医时的参考资料。",
          ],
        },
        {
          title: "四、其他体检注意事项",
          content: [],
        },
        {
          subTitle: "留取标本应注意",
          content: [
            "1、做尿常规留取尿标本时，需要保持外阴清洁并请留中段尿标本，以确保化验结果的准确性；女士留取尿标本应避开月经期（至少经后3天）。",
            "2、做泌尿系统肿瘤筛查，应留取晨尿送检，尽量少饮水保证尿液不稀释，留取尿标本时请至少留足50ml；男士做该项目应24小时内无排精液现象。",
            "3、如做大便常见、潜血检查，可到中心后留取标本，也可事前用洁净干燥容器留取好24小时内的便标本，如大便有黏液或血液，应注意选取黏液及血液部分，以便提供准确的信息给医生。",
            "4、如做TCT宫颈癌筛查，请避开月经期，筛查前24小时阴道不上药、不冲洗、不过性生活。",
          ],
        },
        {
          subTitle: "老人体检六大注意事项",
          content: [
            "1、老年人体检查血糖两天内忌吃高糖食物。",
            "2、老年人体检查血脂肝功前。 3天不吃高脂、高蛋白饮食。",
            "3、老年人体检查尿常规24小时内不过量或过少饮水。",
            "4、老年人体检查肾功能前3天不大量进食高蛋白食物。",
            "5、老年人在确诊高血压前1—3周进低盐饮食。",
            "6、老年人体检做心电图、脑血流图24小时内禁酒。",
          ],
        },
      ],
    };
  },
  computed: {
    list() {
      return Array(15).fill({
        name: "内科",
        address: "一楼120",
        result: "健康",
        unit: "kg",
        state: 1,
        stateText: "已检",
      });
    },
  },
  methods: {
    onClickItem(e) {
      if (this.current !== e.currentIndex) {
        this.current = e.currentIndex;
      }
    },
    // 查看二维码
    handleViewQRCode() {
      this.$refs.getQEDialog.open();
      this.getQECode(this.productInfo);
    },
    // 获取二维码
    getQECode(item) {
      console.log(item);
      drawQrcode({
        width: 200,
        height: 200,
        canvasId: "myQrcode",
        background: "#ffffff", //	非必须，二维码背景颜色，默认值白色
        foreground: "#2979ff", // 非必须，二维码前景色，默认值黑色 	'#000000'
        text: item.QECode,
        image: {
          imageResource: "../../static/logo.png", // 指定二维码小图标
          dx: 70,
          dy: 70,
          dWidth: 60,
          dHeight: 60,
        },
      });
    },
    // 关闭弹窗
    closeDialog() {
      this.$refs.getQEDialog.close();
    },
  },
};
</script>

<style lang="scss" scoped>
.top-box {
  display: flex;
  border-radius: 8px;
  margin: 1rem;
  background-color: #fff;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(151, 203, 245, 0.5);
}

.top-group-box {
  width: 65vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.top-group-item-avatar {
  width: 12vh;
  height: 12vh;
  padding: 10px;
  border-radius: 6px;
}
.top-group-item-avatar image {
  height: 100%;
  width: 100%;
  border-radius: 6px;
}
.top-group-item {
  font-size: 14px;
  font-weight: bold;
  margin: 10px 0;
  padding-left: 2px;
}
.top-group-box-tag {
  display: flex;
  margin: 10px 0;
}
.box-tag {
  margin: 0 4px;
}
.cost {
  color: #ff0000;
  font-weight: bold;
}
.date-box {
  border-radius: 8px;
  margin: 1rem;
  background-color: #fff;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(151, 203, 245, 0.5);
}
.date-text {
  padding: 10px;
  font-weight: bold;
}
.date-box-table {
  border: 1px solid #ebeef5;
  display: flex;
  overflow: scroll;
  scrollbar-width: none; /* 针对Firefox */
  -ms-overflow-style: none; /* 针对Internet Explorer 和 Edge */
}
.date-box-table::-webkit-scrollbar {
  display: none;
}
.date-box-item-data {
  border-bottom: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.data-now {
  font-size: 12px;
  text-align: center;
  margin: 0.125rem;
}
.data-date {
  font-size: 12px;
  text-align: center;
  margin: 0.125rem;
}
.date-box-item-state {
  font-size: 12px;
  padding: 0.625rem 0rem;
  text-align: center;
  border-right: 1px solid #ebeef5;
}
.content {
  border-radius: 8px;
  margin: 1rem;
  border: 1px solid #ebeef5;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(151, 203, 245, 0.5);
}
.content-group {
  margin: 0.625rem;
}
.content-group-item {
  padding: 10px;
  font-size: 12px;
  border-bottom: 1px solid #ebeef5;
}
.notes {
  margin-bottom: 100px;
}
.projects {
  margin-bottom: 100px;
}
.content-box {
  margin-top: 10px;
  padding: 10px;
  .content-box-title {
    font-size: 14px;
    font-weight: 600;
    color: rgb(51, 127, 299);
  }
  .content-box-subTitle {
    font-size: 14px;
    font-weight: 600;
    color: rgb(51, 127, 299);
    text-align: center;
  }
  .content-detail {
    padding: 4px;
    font-size: 12px;
    line-height: 24px;
  }
}
.bottom-box {
  position: fixed;
  bottom: 0;
  background-color: #fff;
  left: 0;
  right: 0;
  border-radius: 8px 8px 0 0;
  display: flex;
  padding: 10px;
}
.bottom-box-item {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.bottom-box-item-left {
  // border: 1px solid red;
  display: flex;
  padding: 10px;
}
.bottom-box-item-left-text {
  font-size: 14px;
}
.bottom-box-item-left-price {
  color: #ff0000;
  font-size: 14px;
  margin-left: 10px;
}
.bottom-box-item-right {
  padding: 10px;
}
.view-qr-code {
  width: 200px;
  height: 200px;
  margin: 0 auto;
}
</style>